<!------------------------------------------- template ------------------------------------------->
<template>
    <view
      class="dw-icon"
      :class="getName"
      :style="getStyle"
    ></view>
</template>

<!-------------------------------------------- script -------------------------------------------->
<script>
export default {
  name: '',
  components: {
  },

  data () {
    return {
    }
  },
  
  props: {
    name: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '32rpx'
    }
  },

  /* 一.生命周期函数 */
  created () {
  },

  /* 二.监控函数 */
  watch: {
  },

  computed: {
    getName () {
      return this.name ? `dw-icon-${this.name}` : ''
    },
    getStyle () {
      const oStyle = {
        fontSize: this.size
      }
      if (this.color) {
        oStyle.color = this.color
      }
      
      return oStyle
    }
  },

  /* 三.内部功能函数 */
  methods: {
    /* ----------------------事件调用函数------------------------ */
    // 事件调用函数注释
    actionXxx () {

    },

    /* ----------------------内部功能函数------------------------ */
    // 内部功能函数注释
    doSomething () {

    },

    /* ----------------------服务请求函数------------------------ */
    // 服务请求函数注释
    ajaxXxx () {

    }
  }
}
</script>

<!-------------------------------------------- style -------------------------------------------->
<style scoped lang="scss">
@import url(./dw-icons.css);
@font-face {
  font-family: 'dwicon-iconfont';
  src: url('https://at.alicdn.com/t/c/font_4651950_zvmtipc4y0k.ttf?t=1726252106665') format('truetype');
}

.dw-icon{
  display: inline-block;
  font-family: "dwicon-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
